<script setup>

//创建编程式路由的对象
// import {useRouter} from "vue-router";
// import {ref} from "vue";
//
// let router = useRouter()
// let myPath = ref('')
// let showList=()=>{
//   //这样的地址我们后期可以通过其他的方式来获得
//   router.push({path:'/list'})
// }
// let goPage=()=>{
//   router.push(myPath.value)
// }

// import {useRouter} from "vue-router";
//
// let router = useRouter()
// let showDetail = (id,language)=>{
//     //尝试使用拼接符拼接参数
//     router.push(`/showDetail/${id}/${language}`)
// }
// //定义一个编程式路由传递键值对参数的方法
// let showDetail2 = (id,language)=>{
//   router.push(`/showDetail2?id=${id}&language=${language}`)
// }
</script>

<template>
  <!--路由的使用和重定向的操作-->
<!--    <div>-->
<!--      <h1>App的主页面</h1>-->
<!--      &lt;!&ndash;使用的就是路由的方式来进行页面之间的跳转&ndash;&gt;-->
<!--      <router-link to="/">Home页面</router-link>-->
<!--      <br>-->
<!--      <router-link to="/add">Add页面</router-link><br>-->
<!--      <router-link to="/list">List页面</router-link><br>-->
<!--      <router-link to="/update">Update页面</router-link><br>-->
<!--      <router-link to="/showAll">ShowAll页面</router-link>-->

<!--      <router-view></router-view>-->
<!--    </div>-->
  <!--编程式路由(动态路由)-->
<!--  <div>-->
<!--    <h1>App的主页面</h1>-->
<!--    &lt;!&ndash;使用的就是路由的方式来进行页面之间的跳转&ndash;&gt;-->
<!--    <router-link to="/">Home页面</router-link>-->
<!--    <br>-->
<!--    <router-link to="/add">Add页面</router-link>-->
<!--    <br>-->
<!--    <router-link to="/list">List页面</router-link>-->
<!--    <br>-->
<!--    <router-link to="/update">Update页面</router-link>-->
<!--    <br>-->
<!--    <router-link to="/showAll">ShowAll页面</router-link>-->
<!--    <br>-->
<!--    &lt;!&ndash;通过点击方法，确定传递的路由的地址，然后去我们要前往的路由的地址&ndash;&gt;-->
<!--    <button @click="showList()">编程式路由访问showList</button>-->
<!--    <br>-->
<!--    <button @click="goPage()">编程式路由访问不固定的页面</button>-->
<!--    <br>-->
<!--    <input type="text" v-model="myPath">-->
<!--    <router-view></router-view>-->
<!--  </div>-->

<!--路由之间的传参-->
<!--  <div>-->
<!--    <h1>App的页面</h1>-->
<!--    <hr>-->
<!--    <router-link to="/showDetail/1/JAVA">通过路径传递参数</router-link>-->
<!--    <br>-->
<!--    <button @click="showDetail(2,'PHP')">通过编程式路由路径传递参数</button>-->
<!--    <br>-->
<!--    <router-link to="/showDetail2?id=3&language=Python">showDetail键值对传参显示JAVA</router-link>-->
<!--    <br>-->
<!--    <router-link v-bind:to="{path:'/showDetail2',query:{id:3,language:'Python'}}">showDetail2键值对传参显示JAVA</router-link>    <hr>-->
<!--    <br>-->
<!--    <button @click="showDetail2(4,'Html')">通过编程式路由键值对传递参数</button>-->
<!--    <br>-->
<!--    showDetail视图展示:<router-view></router-view>-->
<!--    <hr>-->

<!--  </div>-->

<!--路由守卫的案例(进入主页面之前，要实现登录的功能)-->
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped>

</style>
